.aggregate-container {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    flex-direction: row;
    height: 100%;
    width: 100%;
    gap: 20px;

    .placeholder {
        color: rgba(0, 0, 0, 0.45);
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        user-select: none;
    }

    .field-list-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;

        .field-list {
            overflow: auto;
            height: 100%;

            .field-item {
                user-select: none;
            }
        }
    }

    .field-operate-container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .group-field,
    .summary-field {
        flex: 1;

        .drop-area {
            width: calc(100% - 45px);
            min-width: 85%;
            max-height: 40%;
            min-height: 20px;
            border: dashed 2px #aaa;
            display: flex;
            flex-direction: column;
            gap: 3px;
            overflow: auto;
            padding: 8px;
        }

        .tag-content {
            color: #000;
            overflow: hidden;
            width: 100%;
            display: flex;
            justify-content: space-between;
            cursor: pointer;

            .tag-text {
                flex-grow: 1;
                flex-shrink: 1;
                overflow: hidden;
            }

            .tag-select {
                width: 80%;
            }

            .close-icon {
                flex-grow: 0;
                flex-shrink: 0;
                cursor: pointer;
                visibility: hidden;
                margin-left: 3px;
            }

            &:hover {
                .close-icon {
                    visibility: visible;
                }
            }
        }
    }
}

.aggregate-result-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex: 3;
    flex-direction: column;

    .aggregate-result-table {
        flex: 1;
        width: calc(100% - 10px);
    }
}

.editable-table {
    width: 100%;
}